﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>添加聚合标注</title>
    <link href="../../libs/ol/ol.css" rel="stylesheet" type="text/css" />
<!--    <script src="../../libs/ol/ol.js" type="text/javascript"></script>-->
    <script src="../../libs/ol/ol-debug.js" type="text/javascript"></script>
    <!--  引入第三方插件库 -->
    <script src="../../libs/jquery-1.11.2.min.js" type="text/javascript"></script>
    <style type="text/css">
        body,html,div,ul,li,iframe,p,img{
            border:none;padding:0;margin:0;
        }
        #map{
            width:100%;
            height:570px;
        }
        #menu{
            width:100%;
            height:20px;         
            padding:5px 10px;
            font-size:14px;
            font-family:"微软雅黑";
            left:10px;    
        }
    </style>
</head>
<body>
    <div id="menu">
          <button id="addFeatures">添加聚合标注</button>
          <button id="removeFeatures">移除聚合标注</button>
    </div> 
    <div id="map" > 
    </div>
    <script type="text/javascript">

        //此示例创建10000个要素
        var count = 10000;
        var features = new Array(count);
        var e = 4500000;
        for (var i = 0; i < count; ++i) {
            var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
            features[i] = new ol.Feature(new ol.geom.Point(coordinates));
        }
        //矢量要素数据源
        var source = new ol.source.Vector({
            features: features
        });
        //聚合标注数据源
        var clusterSource = new ol.source.Cluster({
            distance: 40,
            source: source
        });
        //加载聚合标注的矢量图层
        var styleCache = {};
        var clusters = new ol.layer.Vector({
            source: clusterSource,
            style: function (feature, resolution) {
                var size = feature.get('features').length;
                var style = styleCache[size];
                if (!style) {
                    style = [new ol.style.Style({
                        image: new ol.style.Circle({
                            radius: 10,
                            stroke: new ol.style.Stroke({
                                color: '#fff'
                            }),
                            fill: new ol.style.Fill({
                                color: '#3399CC'
                            })
                        }),
                        text: new ol.style.Text({
                            text: size.toString(),
                            fill: new ol.style.Fill({
                                color: '#fff'
                            })
                        })
                    })];
                    styleCache[size] = style;
                }
                return style;
            }
        });

        //实例化Map对象加载地图，默认加载聚合标注图层
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                clusters //聚合标注图层
            ],
            target: 'map', //地图容器div的ID
            view: new ol.View({
                center: [0, 0], //地图初始中心点
                minZoom: 2,
                zoom: 2
            })
        });

        //添加聚合标注
        document.getElementById('addFeatures').onclick = function () {
            var currentFeatrues = clusterSource.getSource().getFeatures(); //当前聚合标注数据源中的要素
            //如果聚合标注数据源中没有要素，则重新添加要素
            if (currentFeatrues.length == 0) {
                clusterSource.getSource().addFeatures(features);
                clusters.setSource(clusterSource);
                map.addLayer(clusters);
            }         
        };
        //移除聚合标注
        document.getElementById('removeFeatures').onclick = function () {
            clusterSource.getSource().clear(); //移除聚合标注数据源中的所有要素
            map.removeLayer(clusters);//移除标注图层
        };
    </script>
</body>
</html>
